<template>
  
  <div class="mine">
      
    <div class="block">
      <div class="title1">

        <div class="imgbox">
        <img src="../../assets/wd-02.jpg" alt="">
        </div>
        <div class="sz">
           <h3>7a9aa5a077a</h3>
           <span>136****9070</span>
        </div>
        <div class="zh">
           <h4>账户设置</h4>
         </div>
    </div>

      <div class="lbt1"> 
        <img src="../../assets/wd-01.jpg" alt="">
     </div>
     <div class="money1">
        <div class="hb">
            <img src="../../assets/wd-03.jpg" alt="">
            <span>红包</span>
            <p>7张今日到期</p>
        </div>
         <div class="ye"> 
            <img src="../../assets/wd-03.jpg" alt="">
            <span>余额</span>
            <p>0</p>
        </div>
     </div>
    </div>

    <div class="cygj">
        <div class="title">常用工具</div>

       <div class="list2">
        
        <div class="btn">
          <van-icon name="location-o" size="24" />
          <span>我的地址</span>
          
        </div>
        <div class="btn">
          <van-icon name="phone-circle-o"  size="24"/>
          <span>我的客服</span>
        </div>
        <div class="btn" @click="toCollect"> 
          <van-icon name="like-o"  size="24"/>
          <span>店铺关注</span>
        </div>
        <div class="btn">
          <van-icon name="star-o"  size="24"/>
          <span>评价有礼</span>
        </div>
      </div>
      
    </div>
    
    <div class="yqhy">
        <div class="left" v-for="(item,index) in arr1" :key="index">
            <h3>{{item.text}}</h3>
            <span>{{item.price}}</span><br>
            <img src="../../assets/wd-03.jpg" alt=""><br>
            <span class="quyq">{{item.text2}}</span>
            <span>{{item.text3}}</span>
        </div>
     </div>
  
      
    </div>
    
    
  
  

</template>

<script>
export default {
   data(){
    return{
        currentIndex:0,
        arr:['我的地址','我的客服','店铺关注','评价有礼'],
        arr1:[
            {text:"邀好友赚现金",price:'最高得15元',pic:"../../assets/wd-03.jpg",text2:"去邀请",text3:'查佣金'},
            {text:"饿了么服务号",price:'关注后接受系统通知',pic:"../../assets/wd-03.jpg",text2:"立即关注"}
        ]
    }
   },
  methods:{
    toCollect(){
      this.$router.push('/collect');
    }
  }
}
</script>

<style lang='scss' scoped>
.mine{
  background-color: #f5f5f5;
}
.block{
  margin: 10px;
  background-color: white;
  .title{
    font-weight: bold;
    padding-left: 10px;
  }
  .list{
    display: flex;
    justify-content: space-around;
    align-content: center;
    .btn{
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      i{
        margin-bottom: 10px;
      }
    }
  }
}

.title1{
    display: flex;
}
.title1 .imgbox img{
    // width: 30px;
    padding-top: 10px;
}
.sz {
    margin-left: 10px;
    margin-top: 20px;
}
.zh {
    margin-left: 50px;
    text-align: center;

}

.lbt1{
    width: 100%;
    // background: orange;
    margin-top: 20px;
}
.lbt1 img{
    
    width: 100%;
}
.money1{
    display: flex; 
    justify-content: space-around;
    margin-top: 20px;
    text-align: center;
}
.money1 .ye p {
    text-align: center;
}
.money1  .hb span{
    display: inline-block;
  margin-left: 10px;
//   padding-bottom: 10px;
}
.money1  .ye span{
  margin-left: 10px;
}
.wdkf{
    margin-top: 20px;
}
// .cygj{
//   display: flex;
// }
.list2{
  display: flex;
    justify-content: space-around;
    align-content: center;
}
.cygj .list2 .btn{
   text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
}

.yqhy{
    display: flex;
    background: white;
    

}
.yqhy{
    margin-top: 20px;
    justify-content: space-around;
}
.yqhy img{
  margin-left: 30px;
}
.yqhy .left{
//   margin-left: 50px;
}
.yqhy .left .quyq{
  margin-right: 10px;
  // font-size: 14px;
}
.active{
    background: rgb(91, 210, 139);
    color:red;
}
</style>